<template>
	<el-col :span="24" class="box">
		<el-col :span="24" class="box-header">预约申请记录</el-col>
		<!--工具条-->
		<el-col :span="24" class="toolbar" :model="filters">
			<el-form :inline="true" >
				<el-form-item>
				    <el-date-picker v-model="filters.start" type="date" placeholder="开始日期" @change="fnGetStart"></el-date-picker>
				</el-form-item>
				<el-form-item>
				    <el-date-picker v-model="filters.end" type="date" placeholder="结束日期" @change="fnGetEnd"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="info" @click="fnGetRecords">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="emitGoBack">返回</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--预约申请列表-->
		<el-table :data="records" border v-loading="recordsLoading" class="records-list m-l-3">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column prop="Applicant" label="申请人" width="120">
			</el-table-column>
			<el-table-column prop="DeptName" label="申请部门" width="180">
			</el-table-column>
			<el-table-column prop="Mobile" label="申请人电话" width="150">
			</el-table-column>
			<el-table-column prop="Subject" label="会议主题" width="200">
			</el-table-column>
			<el-table-column prop="Host" label="主持人" width="120">
			</el-table-column>
			<el-table-column label="会议时间" min-width="300">
				<template scope="scope">
					<p>{{scope.row.FromTime}} 至  {{scope.row.ToTime}}</p>
				</template>
			</el-table-column>
			<el-table-column prop="Number" label="参会人数" width="120">
			</el-table-column>
			<el-table-column prop="Status" label="申请状态" width="120">
			</el-table-column>
			<el-table-column prop="CreatedTime" label="申请时间" width="180">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="110">
				<template scope="scope">
				    <el-tooltip class="item" effect="dark" content="撤销申请" placement="bottom">
				      	<el-button type="warning" size="mini" icon="custom-revoke"  @click="fnOpenRevoke(scope.row.ID)"></el-button>
				    </el-tooltip>
					<el-tooltip class="item" effect="dark" content="删除申请" placement="bottom">
						<el-button type="danger" size="mini" icon="custom-delete"  @click="fnRemove(scope.row.ID)"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--撤销原因界面-->
		<el-dialog title="撤销申请" v-model="revokeVisible" :close-on-click-modal="false">
			<el-form :model="revokeForm" label-width="100px" ref="revokeForm">
				<el-form-item label="撤销原因">
					<el-col :span="21">
						<el-input type="textarea" :rows="2" v-model="revokeForm.Reason" placeholder="撤销原因"></el-input>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="revokeVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnRevoke">提交</el-button>
			</div>
		</el-dialog>
	</el-col>
</template>

<script>
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		props:['office-id'],
		data() {
			return {
				filters : {
					start : (moment(new Date()).format('YYYY-MM-DD')) + " " + "00:00:00",
					end : ''
				},
				recordsLoading : false,
				records : [],
				revokeVisible : false,
				revokeForm : {
					Reason :''
				},
				revokeId : 0
			}
		},
		methods: {
			//自定义事件->返回
			emitGoBack(){
				this.$emit('go-back','room','conference')
			},
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
			//获取开始日期
			fnGetStart(val){
				if (val) {
					this.filters.start = val + " " + "00:00:00"
				} else {
					this.filters.start = val
				}
			},
			//获取结束日期
			fnGetEnd(val){
				if (val) {
					this.filters.end = val + " " + "23:59:59"
				} else {
					this.filters.end = val
				}
			},
			//获取选择时间内的预约申请记录
		    fnGetRecords(){
		    	var that = this
		    	var params = {
		    		RoomID : that.officeId,
					From : that.filters.start,
					To : that.filters.end
		    	}
	            Svc.fnPostData('/api/mroom/appointment/room',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.records = res.body.Data
	            	} else {
	            		that.openMessage("指定年份日历获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //打开撤销页面
		    fnOpenRevoke(id){
		    	var that = this
		    	that.revokeId = id
		    	that.revokeVisible = true
		    },
		    //撤销申请
		    fnRevoke(){
		    	var that = this
		    	var params = {
		    		ID:that.revokeId,
		    		Reason:that.revokeForm.Reason
		    	}
				Svc.fnPostData('/api/mroom/appointment/cancel',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.openMessage("会议室申请撤销成功！",'success')
	            		that.revokeVisible = false
	            		that.fnGetRecords()
	            	} else {
	            		that.openMessage("会议室申请撤销失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
			//删除申请
            fnRemove(removeId){
                var that = this
                var params = {
                    ID:removeId
                }
                that.$confirm('您确认删除本条会议室申请吗？', '提示', {
                    type: 'warning'
                }).then(function(){
                    Svc.fnPostData('/api/mroom/appointment/remove',params,function(res){
                        if (res.body.ErrCode == 0){
                            that.openMessage("会议室申请删除成功！",'success')
                            that.fnGetRecords()
                        } else {
                            that.openMessage("会议室申请删除失败！",'error')
                        }
                    },function(){
                        that.openMessage("网络错误，请重新！",'error')
                    })
                })
			}
		},
		mounted() {
			//获取选择时间内的预约申请记录
		    this.fnGetRecords()
		}
	}
</script>

<style scoped>
	.m-l-3{
		margin-left: 3%;
	}
	.box {
		background-color: #fff;
   		box-sizing: border-box;
   		background: #fff;
    	border: 1px solid #d1dbe5;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
		margin-top: 20px;
	}

	.box-header{
		background-color: #eef1f6;
	    border-bottom: 1px solid #d1dbe5;
	    padding: 10px;
	    margin-bottom: 24px;
	    font-size: 15px;
	    color: #48576a;
	}
	.records-list{
		width: 94%;
		margin-bottom:30px;
	}
	
	.toolbar {
		width: 94%;
		height: 56px;
	    background: #f2f2f2;
	    padding: 10px 10px 0 10px;
	    margin: 10px 0 20px 3%;
	}
</style>